<template>
  <div class="address-page">
    <nav-bar>地址管理</nav-bar>
    <van-address-list
        v-model="chosenAddressId"
        :list="addressState.list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
    />

  </div>
</template>

<script setup lang="ts">
import {onMounted, ref} from "vue";
import type {AddressListAddress} from "vant";
import NavBar from "@/components/common/navbar/NavBar.vue";
import {useRouter} from "vue-router";
import {getAddressList} from "@/network/address";
import {addressState} from "@/views/profile/state";

const router = useRouter();
const chosenAddressId = ref("");

function onAdd() {
  router.push({
    path: "/address/edit"
  });
}

function onEdit(item: AddressListAddress) {
  router.push({
    path: "/address/edit",
    query: {type: "edit", addressId: item.id}
  });
}

onMounted(() => {
  getAddressList().then((res) => {
    addressState.list = res.data.map((item: {
      id: number;
      name: string;
      province: string;
      city: string;
      county: string;
      address: string;
      phone: string;
      is_default: number;
      created_at: string;
      updated_at: string;
    }) => {
      return {
        id: item.id,
        name: item.name,
        tel: item.phone,
        address: `${item.province} ${item.city} ${item.county} ${item.address}`,
        isDefault: item.is_default
      };
    });
  });
});
</script>

<style lang="scss">
.address-page {
  margin: 48px 0 0 0;
  .van-address-list{
    text-align: left;
  }
  .van-radio__icon {
    display: none;
  }
}

.van-address-list__bottom {
  bottom: 120px;

  .van-button {
    background: #42b983;
    border-color: #42b983;
  }
}
</style>